<template>
  <div>
    <el-dialog
      :title="fastmodifytitle"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      class="mt-dialog"
      append-to-body
      width="50%"
      @close="close"
    >
      <el-row>
        <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
          <el-form :model="feedmodify">
            <el-tag>{{ fastmodify_detail }}</el-tag>
            <el-form-item label="操作原因(请填入真实原因)" :label-width="200">
              <el-input v-model="feedmodify.reason" autocomplete="off" />
            </el-form-item>
            <el-form-item label="选择处理方式" :label-width="200">
              <el-select v-model="feedmodify.operation" placeholder="选择网站" clearable>
                <el-option label="所有" value="" />
                <el-option
                  v-for="item in operations"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-if="feedmodify.operation === 'customize'" label="自定义标签" :label-width="200">
              <el-input v-model="customize_operation" autocomplete="off" />
            </el-form-item>
            <el-form-item v-if="feedmodify.operation === 'fast_modify_price'" label="修改价格" :label-width="200">
              <el-input v-model="modify_price" autocomplete="off" />
            </el-form-item>
            <el-form-item v-if="feedmodify.operation === 'optimization'" label="替换产品链接" :label-width="200">
              <el-input v-model="change_crawl_url" autocomplete="off" />
            </el-form-item>
          </el-form>
        </el-col>

        <el-col v-loading="loading" :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
          <img style="height: 200px;width:200px" :src="productimage"><br>
          <a :href="landing" target="_blank">打开产品</a>
          <a :href="source_url" target="_blank" style="margin-left: 20px">采购</a>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="warning" style="margin-left: 16px;" @click="drawer = true">
          广告历史
        </el-button>
        <el-switch v-model="feedmodify.force" style="margin-right: 20px" title="强制删除" />
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleFastModifyFeed">确 定</el-button>
      </span>
    </el-dialog>
    <el-drawer
      :wrapper-closable="false"
      title="广告历史"
      :visible.sync="drawer"
    >
      <el-table :data="history" show-summary>
        <el-table-column property="timestamp" label="日期" width="150" />
        <el-table-column property="amount" label="收入" width="100" />
        <el-table-column property="cost" label="花费" width="100" />
        <el-table-column property="clicks" label="点击" width="100" />
        <el-table-column property="display" label="展示" width="100" />
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
import { FastModifyFeedProduct } from '@/api/orders/merchantfeed'
import { Get as GetLandingPage } from '@/api/orders/googlereportlandingpage'
import { Get as GetOrderDetail } from '@/api/orders/psorderdetail'
import qs from 'qs'

const orderMapper = {
  'ascending': 0,
  'descending': 1,
  'null': ''
}
export default {
  name: 'Feedfastmodify',
  props: ['isVisual', 'domain', 'website_id', 'product_id'],
  data() {
    return {
      data: [],
      landing: '',
      source_url: '',
      history: [],
      drawer: false,
      landingPagedata: '',
      fastmodifytitle: '',
      productimage: '',
      fastmodify_detail: '',
      feedmodify: {
        website_id: '',
        operation: '',
        reason: '',
        product_id: '',
        force: false
      },
      customize_operation: 'normal',
      modify_price: '',
      change_crawl_url: '',
      operations: [
        {
          'label': '修改价格',
          'value': 'fast_modify_price'
        },
        {
          'label': '稍后优化',
          'value': 'optimization'
        },
        {
          'label': '删除(fast_delete)',
          'value': 'fast_delete'
        },
        {
          'label': '放到低CPC(low_cpc)',
          'value': 'low_cpc'
        },
        {
          'label': '春天(ads_spring)',
          'value': 'ads_spring'
        },
        {
          'label': '夏天(ads_summer)',
          'value': 'ads_summer'
        },
        {
          'label': '秋天(ads_autumn)',
          'value': 'ads_autumn'
        },
        {
          'label': '冬天(ads_winter)',
          'value': 'ads_winter'
        },
        {
          'label': '万圣节(ads_holloween)',
          'value': 'ads_holloween'
        },
        {
          'label': '暂停广告(stop_ads)',
          'value': 'stop_ads'
        },
        {
          'label': '自定义标签',
          'value': 'customize'
        }
      ],
      dialogVisible: false,
      listLoading: true,
      loading: false,
      kwInput: '',
      order_by: '',
      order_desc: '',
      pagesize: 10,
      page: 1,
      total: 0
    }
  },
  watch: {
    domain(v) {
      this.feedmodify.domain = v
    },
    website_id(v) {
      this.feedmodify.website_id = v
    },
    product_id(v) {
      this.feedmodify.product_id = v
    },
    isVisual(v) {
      this.dialogVisible = v
      if (v) {
        this.getList()
      }
    }
  },
  methods: {
    getList() {
      this.fastmodifytitle = '快速处理' + this.feedmodify.domain + ' 产品:' + this.feedmodify.product_id
      if (this.feedmodify.website_id === '') {
        this.$notify({
          title: '错误',
          message: 'website_id 为空',
          type: 'error',
          duration: 2000
        })
        return
      }
      if (this.feedmodify.product_id === '') {
        this.$notify({
          title: '错误',
          message: 'product_id 为空',
          type: 'error',
          duration: 2000
        })
        return
      }
      this.loading = true
      GetLandingPage('', qs.stringify({ website_id: this.feedmodify.website_id, product_id: this.feedmodify.product_id }))
        .then(response => {
          this.loading = false
          this.landingPagedata = response.data.data[0]
          this.total = response.data.total
          if (this.total > 0) {
            this.productimage = this.landingPagedata.image
            this.modify_price = this.landingPagedata.price
            this.landing = this.landingPagedata.landing
            this.source_url = this.landingPagedata.source_url
            this.history = this.landingPagedata.history
            this.fastmodify_detail = '历史: 销售:' + this.landingPagedata.total_sales.toFixed(1) + ' 广告费:' + this.landingPagedata.total_cost.toFixed(1) + '点击:' + this.landingPagedata.total_clicks
            this.feedmodify.reason = this.fastmodify_detail + ' 不出单'
          } else {
            GetOrderDetail('', qs.stringify({ website_id: this.feedmodify.website_id, product_id: this.feedmodify.product_id })).then(response => {
              this.loading = false
              if (response.data.total) {
                this.productimage = response.data.data[0]['image']
                this.landing = response.data.data[0]['ps_url']
                this.source_url = response.data.data[0]['product_url']
              }
            }).catch(err => {
              console.log(err)
              this.loading = false
            })
          }
        }).catch(err => {
          this.loading = false
          console.log(err)
        })
    },
    handleFastModifyFeed(row) {
      if (this.feedmodify.operation === '') {
        return
      }
      const _data = Object.assign({}, this.feedmodify)
      if (this.feedmodify.operation === 'customize') {
        _data.operation = this.customize_operation
      }
      if (this.feedmodify.operation === 'fast_modify_price') {
        _data.modify_price = this.modify_price
      }
      if (this.feedmodify.operation === 'optimization') {
        _data.change_crawl_url = this.change_crawl_url
      }
      _data.imageLink = this.productimage
      FastModifyFeedProduct(_data)
        .then(response => {
          this.$notify({
            title: '成功',
            message: response.message,
            type: 'success',
            duration: 2000
          })
          this.productDialogVisible = false
          if (this.currentRow) {
            this.currentRow.operation = _data.operation
            this.currentRow.reason = _data.reason
            if (this.feedmodify.operation === 'fast_modify_price') {
              this.currentRow.price = this.modify_price
            }
          }
          this.feedmodify.force = false
          this.dialogVisible = false
        }).catch(err => {
          this.$notify({
            title: '失败',
            message: err,
            type: 'success',
            duration: 2000
          })
          this.feedmodify.force = false
        })
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    // 点击搜索
    handleSearch() {
      this.page = 1
      this.getList()
    },
    handleSort(v) {
      this.order_by = v.prop
      this.order_desc = orderMapper[v.order]
      this.getList()
    },
    scrollTop() {
      window.scrollTo(0, 0)
    },
    close() {
      this.fastmodifytitle = '产品信息获取失败,请不要做任何操作'
      this.$emit('closeMyDialog', false)
    }
  }
}
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .top >>> .el-input {
    width: auto;
  }

  .top >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .top {
    padding-left: 20px;
    margin-bottom: 5px;
    margin-top: 28px;
  }

  .input-with-select {
    width: calc(100% - 200px);
  }

  .add-btn {
    float: right;
    margin-right: 20px;
    width: 150px
  }

  .mt-pagination {
    float: right;
    margin-top: 5px;
  }

  .app-container >>> .el-dialog {
    margin-top: 48px !important;
    margin-bottom: 5px;
  }

  .mt-dialog >>> .el-transfer-panel {
    width: calc(50% - 60px);
  }

  .mt-form >>> .el-select {
    width: 100%;
  }

  .mt-form >>> .el-input__inner {
    width: 100%;
  }

  .mt-dialog >>> .el-dialog {
    margin: 10px auto !important;
  }

  .mt-dialog >>> .el-dialog__body {
    padding-bottom: 60px;
    padding-top: 5px;
  }

  .top >>> .el-select {
    width: 300px;
  }
</style>
